<template>
  <el-dialog v-model="dialogVisible" :destroy-on-close="true" :align-center="true" width="50%" :title="`配置当家币`">
    <el-form ref="ruleFormRef" :model="dialogData.itemInfo" label-width="160px" label-suffix=" :">
      <el-form-item label="当前可用当家币">
        <span class="cur-total">
          {{ dialogData.itemInfo.showTotalCnt || 0 }}
        </span>
      </el-form-item>

      <el-form-item label="调整值">
        <span class="cur-change">
          {{ getChanged || 0 }}
        </span>
      </el-form-item>
      <el-alert title="调整值：是在当前值的基本上进行加和减" type="info" :closable="false" show-icon />
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="info-title">调整以下各帐号的当家币</div>
        </el-col>
      </el-row>
      <div class="config-wrapper">
        <el-row :gutter="20" class="row-item">
          <el-col :span="8" align="center" class="row-item-title"> 帐号名称 </el-col>
          <el-col :span="8" align="center" class="row-item-title"> 当前值 </el-col>
          <el-col :span="8" align="center" class="row-item-title"> 调整值 </el-col>
        </el-row>
        <el-row v-for="item in dialogData.itemInfo.userCoins" :key="item.userId" :gutter="20" class="row-item">
          <el-col :span="8" align="center" class="row-item-info">
            {{ item.userName }}
          </el-col>
          <el-col :span="8" align="center" class="row-item-info">
            {{ item.showCurCnt }}
          </el-col>
          <el-col :span="8" align="center" class="row-item-info">
            <el-input-number v-model="item.showOptCnt"></el-input-number>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible = false">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="btnLoading">保存配置</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { ElMessage, FormInstance } from "element-plus";
import { getOptTitle, OptEnum } from "@/biz/eenum/appEnum";
import { DialogParam } from "@/biz/interface/DialogType";
import { CompanyConfigCoinVo } from "@/biz/interface/CompanyType";

import { getCompanyUserCoinConfigApi, saveCompanyUserCoinConfigApi } from "@/api/modules/cpy/act";
// import { ITEM_RENDER_EVT } from "element-plus/es/components/virtual-list/src/defaults";

//页面的数据
interface UserDialogOption extends DialogParam {
  //弹出表单的标题
  title: string;
  //当前的数据对象
  itemInfo: CompanyConfigCoinVo;
}

//提交按钮，避免多次提交
const btnLoading = ref(false);
// 弹出框的参数
const dialogVisible = ref(false);
const dialogData = reactive<UserDialogOption>({
  optType: OptEnum.UNKNOW,
  title: "",
  itemInfo: {}
});

// 接收父组件传过来的参数
const acceptParams = (params: DialogParam): void => {
  dialogData.optType = params.optType;
  dialogData.rowData = params.rowData;
  dialogData.title = getOptTitle(dialogData.optType);
  getItemInfo();
  dialogVisible.value = true;
};

//获取当前数据的详情，不通过表格上的数据行，直接调用接口获取数据
const getItemInfo = async () => {
  //通过接口获取数据
  let { data } = await getCompanyUserCoinConfigApi({});
  // console.log("接收到服务器端的数据", data);
  dialogData.itemInfo = data as unknown as CompanyConfigCoinVo;
};

const getChanged = computed(() => {
  if (dialogData.itemInfo.userCoins) {
    let reval = dialogData.itemInfo.userCoins.reduce((prev, cur) => {
      return prev + (cur.showOptCnt || 0);
    }, 0);
    return -reval;
  }
  return 0;
});

// 提交数据（新增/编辑）
const ruleFormRef = ref<FormInstance>();
const handleSubmit = () => {
  btnLoading.value = true;
  ruleFormRef.value!.validate(async valid => {
    if (!valid) {
      btnLoading.value = false;
      return;
    }
    try {
      // console.log("要提交的数据", dialogData.itemInfo);
      // //提交数据
      let res = await saveCompanyUserCoinConfigApi({
        ...dialogData.itemInfo
      });
      if (res.data) {
        ElMessage.success({ message: `配置成功！` });
        //刷新列表数据
        emits("refresh-info");
        dialogVisible.value = false;
      } else {
        ElMessage.error({ message: res.msg });
      }
    } catch (error) {
      // console.log(error);
    } finally {
      btnLoading.value = false;
    }
  });
};

//页面事件
const emits = defineEmits(["refresh-info"]);

//页面参数
defineExpose({
  acceptParams
});
</script>
<style scoped lang="scss">
.cur-total {
  font-size: 1.8em;
  color: #f00;
  font-weight: 600;
}

.cur-change {
  font-size: 1.6em;
  color: #f00;
  font-weight: 600;
}
.config-wrapper {
  // border: 1px solid red;

  .row-item {
    height: 40px;
    line-height: 40px;

    .row-item-title {
      font-size: 0.9em;
      font-weight: 600;
    }
  }
}
</style>
